<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="js/ol.css">
    <script src="lib/jquery/jquery-3.3.1.js"></script>
    <script src="js/ol.js"></script>
    <script src="lib/turf.js"></script>

</head>
<body>
<div id="map"></div>
<script>
    //view
    var view=new ol.View({
        // 设置成都为地图中心
        center: ol.proj.transform([110,39],"EPSG:4326","EPSG:3857"),
        zoom: 4
    });
    // map

    function getTdtLayer(lyr) {
        var urls=[];
        for(var i=0;i<8;i++)
        {
            urls.push( "http://t"+i+".tianditu.com/DataServer?T=" + lyr + "&X={x}&Y={y}&L={z}&tk=07c3369864c03fb6a162ac560811db9b")
        }
        var layer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                urls:urls
            })
        });
        return layer;
    }
    function styleFunction(feature) {
        var tem = feature.get("temperature");
        var colors = ["#5a9fdd", "#f7eb0c", "#fc9e10", "#f81e0d", "#aa2ab3"];
        var color = colors[parseInt(tem/2)];
        return new ol.style.Style({
            fill: new ol.style.Fill({
                color: color
            }),
            stroke: new ol.style.Stroke({
                color: color,
                width: 4
            }),
            image: new ol.style.Circle({
                radius: 5,
                fill: new ol.style.Fill({
                    color: color
                }),
                stroke: new ol.style.Stroke({
                    color: '#fff',
                    width: 1
                })
            })
        });
    }
    // create a grid of points with random z-values in their properties
    //
    //点样式
    var fill = new ol.style.Fill({
        color: '#dd942e'
    });
    var stroke = new ol.style.Stroke({
        color: '#cc1000',
        width: 1.25
    });
    var stylePoint = [
        new ol.style.Style({
            image: new ol.style.Circle({
                fill: new ol.style.Fill({
                    color: 'rgba(255,0,255,0.4)'
                }),
                stroke: new ol.style.Stroke({
                    color: '#cc3540',
                    width: 1.25
                }),
                radius: 5
            }),
            fill: fill,
            stroke: stroke
        })
    ];
    var vectorSource = new ol.source.Vector({

    });
    var fc = {type: 'FeatureCollection'};
    var featurecollection=[];
    $.ajax({
        type: 'POST',
        url: "http://localhost:8080/testmaven/shp/geojson",
        data: {
            layer: "capital"
        },
        success: function (data) {
            var features=data.features;
            for(var i=0;i<features.length;i++)
            {
                var feature=features[i];
                var ft=new ol.Feature({
                    geometry:new ol.geom.Point(feature.geometry.coordinates),
                    properties:feature.properties
                });
                //ft.attr=feature;
                var prop=ft.getProperties();
                var geo=ft.getGeometry();
                //ft.setProperties("temperature",Math.random() * 10);
                vectorSource.addFeature(ft);
                feature.properties.temperature=Math.random() * 10;
                featurecollection.push(feature);
            }

            fc.features=featurecollection;
            var extent = [508650, 299500, 509100, 299900];
            var cellWidth = 5 ;
            var pointGrid = turf.pointGrid(extent, cellWidth);
            for (var i = 0; i < pointGrid.features.length; i++) {
                pointGrid.features[i].properties.temperature = Math.random() * 10;
            }
            var breaks = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
            var lines = turf.isolines(pointGrid, breaks, {zProperty: 'temperature'});

            /*        var _lFeatures = lines.features;
                    for(var i=0;i<_lFeatures.length;i++){
                        var _coords = _lFeatures[i].geometry.coordinates;
                        var _lCoords = [];
                        for(var j=0;j<_coords.length;j++){
                            var _coord = _coords[j];
                            var line = turf.lineString(_coord);
                            var curved = turf.bezierSpline(line);
                            _lCoords.push(curved.geometry.coordinates);
                        }
                        _lFeatures[i].geometry.coordinates = _lCoords;
                    }*/
            var featureslines = (new ol.format.GeoJSON()).readFeatures(lines);
            var features = (new ol.format.GeoJSON()).readFeatures(fc);
            features = features.concat(featureslines);
/*            for(var i=0;i<features.length;i++){
                features[i].getGeometry().transform("EPSG:4326","EPSG:3857");
            }*/
            var source = new ol.source.Vector({
                features:featureslines
            });
            var vector = new ol.layer.Vector({
                source: source,
                style: styleFunction
            });
            map.addLayer(vector);
        }
    });
/*    var vectorSource = new ol.source.Vector({
        url:"http://localhost:8080/testmaven/shp/geojson",
        format:new ol.format.GeoJSON()
    });*/

    var vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        style:stylePoint
    });



    var map = new ol.Map({
        layers: [
            getTdtLayer("vec_w"),
            getTdtLayer("cva_w"),
            //vector,
            vectorLayer
        ],
        target: 'map',
        view: new ol.View({
            center: [508820, 299788],
            zoom: 17
        })
    });



</script>
</body>
</html>
